<div class="container">
  <div class="sixteen columns">

    <!-- 手机等比较小的屏幕上显示的目录按钮 -->
    <a href="{:U('Index/index')}#menu" class="menu-trigger"><i class="fa fa-bars"></i> Menu</a>

    <nav id="navigation">
      <ul class="menu" id="responsive">
        <li><a href="{:U('Index/index')}" class="current homepage" id="current">首页</a></li>
        <li class="dropdown">
        <a href="{:U('Category/index')}">分类目录</a>
        <ul>
          <li><a href="shop-with-sidebar.html">Shop With Sidebar</a></li>
          <li><a href="shop-full-width.html">Shop Full Width</a></li>
          <li><a href="checkout-billing-details.html">Checkout Pages</a></li>
          <li><a href="shop-categories-grid.html">Categories Grid</a></li>
          <li><a href="single-product-page.html">Single Product Page</a></li>
          <li><a href="variable-product-page.html">Variable Product Page</a></li>
          <li><a href="wishlist.html">Wishlist Page</a></li>
          <li><a href="shopping-cart.html">Shopping Cart</a></li>
        </ul>
        </li>

        <li>
        <a href="index.html#">Features</a>
        <div class="mega">
          <div class="mega-container">

            <div class="one-column">
              <ul>
                <li><span class="mega-headline">Example Pages</span></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="404-page.html">404 Page</a></li>
              </ul>
            </div>

            <div class="one-column">
              <ul>
                <li><span class="mega-headline">Featured Pages</span></li>
                <li><a href="index-2.html">Business Homepage</a></li>
                <li><a href="shop-with-sidebar.html">Default Shop</a></li>
                <li><a href="blog-masonry.html">Masonry Blog</a></li>
                <li><a href="variable-product-page.html">Variable Product</a></li>
                <li><a href="portfolio-dynamic-grid.html">Dynamic Grid</a></li>
              </ul>
            </div>

            <div class="one-column hidden-on-mobile">
              <ul>
                <li><span class="mega-headline">Paragraph</span></li>
                <li><p>This <a href="index.html#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p></li>
              </ul>
            </div>

            <div class="one-fourth-column hidden-on-mobile">
              <a href="index.html#" class="img-caption margin-reset">
                <figure>
                  <img src="__IMG__/menu-banner-01.jpg" alt="" />
                  <figcaption>
                    <h3>Jeans</h3>
                    <span>Pack for Style</span>
                  </figcaption>
                </figure>
              </a>
            </div>

            <div class="one-fourth-column hidden-on-mobile">
              <a href="index.html#" class="img-caption margin-reset">
                <figure>
                  <img src="__IMG__/menu-banner-02.jpg" alt="" />
                  <figcaption>
                    <h3>Sunglasses</h3>
                    <span>Nail the Basics</span>
                  </figcaption>
                </figure>
              </a>
            </div>

            <div class="clearfix"></div>
          </div>
        </div>
        </li>

        <li class="dropdown">
        <a href="index.html#">Shortcodes</a>
        <ul>
          <li><a href="elements.html">Elements</a></li>
          <li><a href="typography.html">Typography</a></li>
          <li><a href="pricing-tables.html">Pricing Tables</a></li>
          <li><a href="icons.html">Icons</a></li>
        </ul>
        </li>

        <li class="dropdown">
        <a href="index.html#">Portfolio</a>
        <ul>
          <li><a href="portfolio-3-columns.html">3 Columns</a></li>
          <li><a href="portfolio-4-columns.html">4 Columns</a></li>
          <li><a href="portfolio-dynamic-grid.html">Dynamic Grid</a></li>
          <li><a href="single-project.html">Single Project</a></li>
        </ul>
        </li>

        <li class="dropdown">
        <a href="index.html#">Blog</a>
        <ul>
          <li><a href="blog-standard.html">Blog Standard</a></li>
          <li><a href="blog-masonry.html">Blog Masonry</a></li>
          <li><a href="blog-single-post.html">Single Post</a></li>
        </ul>
        </li>

      </ul>
    </nav>
  </div>
</div>
